---
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import LinkButton from "@/components/LinkButton.astro";
import { SITE } from "@/config";
import Artalk from "@/components/Artalk.astro";
---

<Layout title={`404 Not Found | ${SITE.title}`}>
  <Header />
  <main
    id="main-content"
    class="mx-auto w-full max-w-app px-4 pb-12"
  >
    <div class="mb-14 flex flex-col items-center justify-center">
      <div id="image-container" class="relative w-[350px] h-[350px]">
        <img 
          id="static-image"
          src={SITE.notFoundStaticImage} 
          alt="404 Not Found" 
          class="w-full h-full object-contain absolute top-0 left-0 z-10"
        />
        <img 
          id="animated-image"
          src={SITE.notFoundImage} 
          alt="404 Not Found" 
          class="w-full h-full object-contain absolute top-0 left-0 hidden"
        />
      </div>
      <p class="mt-4 text-2xl sm:text-3xl">你似乎来到了没有知识存在的荒原</p>
      <!-- <LinkButton
        href="/"
        class="my-6 text-lg underline decoration-dashed underline-offset-8"
      >
        Go back home
      </LinkButton> -->
    </div>
    <div id="Comments"></div>
    <Artalk />
  </main>
  <Footer />
</Layout>

<script>
  // 等待DOM加载完成
  document.addEventListener("DOMContentLoaded", () => {
    const container = document.getElementById("image-container");
    const staticImage = document.getElementById("static-image");
    const animatedImage = document.getElementById("animated-image");

    if (!container || !staticImage || !animatedImage) return;

    // 鼠标悬停时显示动画
    container.addEventListener("mouseenter", () => {
      staticImage.style.display = "none";
      animatedImage.classList.remove("hidden");
    });

    // 鼠标离开时显示静态图片
    container.addEventListener("mouseleave", () => {
      staticImage.style.display = "block";
      animatedImage.classList.add("hidden");
    });
  });
</script>
